<template>
  <el-dialog :title="agent.id?'编辑经纪':'添加经纪'" :visible="isShowDialog" :close-on-click-modal="false" @close="isCancel">
    <el-form ref="ruleForm" :model="agent" :rules="rules">
      <el-form-item label="名称" prop="name">
        <el-input v-model="agent.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="agent.email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="agent.phone" placeholder="请输入电话" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="agent.address" placeholder="请输入地址" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="agent.desc" type="textarea" :rows="3" placeholder="请输入描述" />
      </el-form-item>
      <el-form-item label="封面">
        <images-upload ref="image" />
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button type="danger" size="small" @click.native="isCancel">取消</el-button>
      <el-button type="primary" size="small" @click.native="isOK">确认</el-button>
    </template>
  </el-dialog>
</template>

<script>
import ImagesUpload from '@/components/ImagesUpload'
import { getAgent, editAgent, addAgent } from '@/api/agents'
export default {
  components: { ImagesUpload },
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      agent: {},
      rules: {
        // 表单验证
        // name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '电话不能为空', trigger: 'blur' },
          { pattern: /^1[3-9][0-9]{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '地址不能为空', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '描述不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 编辑/新增
    async isOK() {
      await this.$refs.ruleForm.validate()
      const fileList = this.$refs.image.fileList
      // console.log(fileList[0].url)
      this.agent.image = fileList[0] ? fileList[0].url : ''
      // console.log(this.agent.id)

      if (!this.agent.image) {
        this.$message.warning('请上传封面')
        return
      }
      if (this.agent.id) {
        await editAgent(this.agent)
        this.$message.success('编辑成功')
      } else {
        console.log(this.agent)
        await addAgent(this.agent)
        this.$message.success('新增成功')
      }

      this.$parent.getAgents()

      this.$parent.isShowDialog = false
    },
    // 数据回显
    async getAgent(id) {
      this.agent = await getAgent(id)
    },
    showImage() {
      if (this.agent.id) {
        this.$refs.image.fileList = [
          {
            url: this.agent.image
          }
        ]
      }
    },

    isCancel() {
      this.$refs.ruleForm.resetFields()
      this.$parent.isShowDialog = false
      this.agent = {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: ''

      }
      this.$refs.image.fileList = []
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
